<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生列表</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>

    </style>
</head>
<body>
  <div id="div">
      <el-container>
          <!--头部区域-->
          <el-header style="background-color: #545c64">
              <el-row>
                  <!--export图片-->
                  <el-col :span="3"><div class="grid-content bg-purple">
                      <img src="img/export.png" style="margin-top: 20px">
                  </div></el-col>
                  <!--顶部水平导航条-->
                  <el-col :span="8" :offset="13"><div class="grid-content bg-purple-light">
                      <el-menu
                              :default-active="activeIndex2"
                              class="el-menu-demo"
                              mode="horizontal"
                              @select="handleSelect"
                              background-color="#545c64"
                              text-color="#fff"
                              active-text-color="#ffd04b">
                          <el-menu-item index="1">处理中心</el-menu-item>
                          <el-submenu index="2">
                              <template slot="title">我的工作台</template>
                              <el-menu-item index="2-1">选项1</el-menu-item>
                              <el-menu-item index="2-2">选项2</el-menu-item>
                              <el-menu-item index="2-3">选项3</el-menu-item>
                              <el-submenu index="2-4">
                                  <template slot="title">选项4</template>
                                  <el-menu-item index="2-4-1">选项1</el-menu-item>
                                  <el-menu-item index="2-4-2">选项2</el-menu-item>
                                  <el-menu-item index="2-4-3">选项3</el-menu-item>
                              </el-submenu>
                          </el-submenu>
                          <el-menu-item index="3" disabled>消息中心</el-menu-item>
                          <el-menu-item index="4"><a href="http://www.itheima.com" target="_blank">黑马学习</a></el-menu-item>
                      </el-menu>
                  </div></el-col>
              </el-row>
          </el-header>

          <el-container>
              <!--侧边栏区域-->
              <el-aside width="200px" style="height: 748px;background-color: #545c64">
                  <el-menu
                          default-active="2"
                          class="el-menu-vertical-demo"
                          @open="handleOpen"
                          @close="handleClose"
                          background-color="#545c64"
                          text-color="#fff"
                          active-text-color="#ffd04b">
                      <el-submenu index="1">
                          <template slot="title">
                              <i class="el-icon-menu"></i>
                              <span>学工部</span>
                          </template>
                          <el-menu-item index="1-1"><i class="el-icon-loading"></i>在校学生管理</el-menu-item>
                          <el-menu-item index="1-2"><i class="el-icon-loading"></i>学生升级/留级</el-menu-item>
                          <el-menu-item index="1-3"><i class="el-icon-loading"></i>学生就业情况</el-menu-item>
                      </el-submenu>
                      <el-submenu index="2">
                          <template slot="title">
                              <i class="el-icon-menu"></i>
                              <span>咨询部</span>
                          </template>
                          <el-menu-item index="2-1"><i class="el-icon-loading"></i>意向学生管理</el-menu-item>
                          <el-menu-item index="2-2"><i class="el-icon-loading"></i>未报名学生管理</el-menu-item>
                          <el-menu-item index="2-3"><i class="el-icon-loading"></i>已报名学生管理</el-menu-item>
                      </el-submenu>
                      <el-submenu index="3">
                          <template slot="title">
                              <i class="el-icon-menu"></i>
                              <span>教研部</span>
                          </template>
                          <el-menu-item index="3-1"><i class="el-icon-loading"></i>已有课程管理</el-menu-item>
                          <el-menu-item index="3-2"><i class="el-icon-loading"></i>正在研发课程管理</el-menu-item>
                          <el-menu-item index="3-3"><i class="el-icon-loading"></i>新技术课程管理</el-menu-item>
                      </el-submenu>
                  </el-menu>
              </el-aside>

              <!--主体区域-->
              <el-main>
                  <!--第一行-->
                  <el-row>
                      <!--学生列表-->
                      <el-col :span="3"><div class="grid-content bg-purple">
                          <h3><font color="red">学生列表</font></h3>
                      </div></el-col>
                      <!--添加学生按钮-->
                      <el-col :span="3" :offset="18"><div class="grid-content bg-purple-light">
                          <el-button type="primary">添加学生</el-button>
                      </div></el-col>
                  </el-row>

                  <!--第二行-->
                  <el-row>
                      <el-col :span="24"><div class="grid-content bg-purple-dark">
                          <template>
                              <el-table
                                      :data="tableData"
                                      style="width: 100%">
                                  <el-table-column
                                          label="日期"
                                          prop="date">
                                  </el-table-column>
                                  <el-table-column
                                          label="姓名"
                                          prop="name">
                                  </el-table-column>
                                  <el-table-column
                                          label="地址"
                                          prop="address">
                                  </el-table-column>
                                  <el-table-column
                                          label="操作"
                                          align="center">
                                      <template slot-scope="scope">
                                          <el-button
                                                  size="mini"
                                                  @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                                          <el-button
                                                  size="mini"
                                                  type="danger"
                                                  @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                      </template>
                                  </el-table-column>
                              </el-table>
                          </template>
                      </div></el-col>
                  </el-row>

              </el-main>
          </el-container>
      </el-container>
  </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            activeIndex2: '1',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    });
</script>
</html>